<template>
  <!-- 头部组件 -->
  <div class="mod-header">
    <div class="section-inner">
      <h1 class="qmusic-title">
        <a href="javascript:;" @click="clickHome">
          <img
            src="../../assets/images/logo.png"
            alt="轻音乐"
            class="qmusic-logo"
          />
        </a>
        轻音乐
      </h1>
      <ul class="mod-top-nav">
        <li class="top-nav-item">
          <a
            href="javascript:;"
            :class="[
              'top-nav-link',
              { 'top-nav-link-current': headCurrent == 0 },
            ]"
            title="发现音乐"
            @click="clickHome"
          >
            发现音乐
          </a>
        </li>
        <li class="top-nav-item">
          <a
            href="javascript:;"
            :class="[
              'top-nav-link',
              { 'top-nav-link-current': headCurrent == 1 },
            ]"
            title="我的音乐"
            @click="clickMy"
          >
            我的音乐
          </a>
        </li>
        <li class="top-nav-item">
          <a
            href="javascript:;"
            :class="[
              'top-nav-link',
              { 'top-nav-link-current': headCurrent == 2 },
            ]"
            title="关注"
            @click="clickFriend"
          >
            关注
          </a>
        </li>
      </ul>
      <ul class="mod-top-subnav clearfix" v-show="showSubNav">
        <li
          :class="[
            'top-subnav-item',
            {
              'top-subnav-item-current': currentIndex == index,
            },
          ]"
          v-for="(item, index) in titles"
          :key="index"
          @click="itemClick(index)"
        >
          <a href="javascript:;" class="top-subnav-link">{{ item }}</a>
        </li>
        <!-- <li class="top-subnav-item" @click="clickArtistDetail('2116')">
          歌手详情
        </li>
        <li class="top-subnav-item" @click="clickUserDetail('376581112')">
          用户详情
        </li> -->
      </ul>
      <div class="mod-top-search">
        <div class="mod-search-input">
          <button class="search-input-btn" @click="search">
            <i class="el-icon-search"></i>
            <span class="icon-txt">搜索</span>
          </button>
          <input
            type="text"
            v-model="input"
            class="search-input-input"
            placeholder="音乐/视频/电台/用户"
            @input="searchInput"
            @focus="searchInput"
            @keyup.enter="search"
          />
        </div>
        <!-- <input type="text" v-model="input2" @input="Input2" /> -->
        <div class="mod-search-result" v-if="showResult">
          <div class="search-result-box" v-if="suggests.songs">
            <h4 class="search-result-title">
              <i class="iconfont">&#xe8ab;</i>
              单曲
            </h4>
            <ul class="search-result-ul">
              <li
                class="search-result-item"
                v-for="item in suggests.songs"
                :key="item.id"
                @click="clickSongs(item.id)"
              >
                <a href="javascript:;">
                  <span class="search-result-item-name">
                    {{ item.name }}
                  </span>
                  -
                  <span class="search-result-item-other">
                    <span v-for="(art, n) in item.artists" :key="art.id">
                      <i v-if="n > 0">/</i>
                      {{ art.name }}
                    </span>
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <div class="search-result-box" v-if="suggests.artists">
            <h4 class="search-result-title">
              <i class="iconfont">&#xe8cf;</i>
              歌手
            </h4>
            <ul class="search-result-ul">
              <li
                class="search-result-item"
                v-for="item in suggests.artists"
                :key="item.id"
                @click="clickArtistDetail(item.id)"
              >
                <a href="javascript:;">
                  <span class="search-result-item-name">
                    {{ item.name }}
                  </span>
                </a>
              </li>
            </ul>
          </div>
          <div class="search-result-box" v-if="suggests.albums">
            <h4 class="search-result-title">
              <i class="iconfont">&#xe8d0;</i>
              专辑
            </h4>
            <ul class="search-result-ul">
              <li
                class="search-result-item"
                v-for="item in suggests.albums"
                :key="item.id"
                @click="clickAlbumDetail(item.id)"
              >
                <a href="javascript:;">
                  <span class="search-result-item-name">
                    {{ item.name }}
                  </span>
                  -
                  <span class="search-result-item-other">
                    {{ item.artist.name }}
                  </span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="header-opt">
        <span class="mod-top-login" v-if="!logged">
          <a href="javascript:;" class="top-login-link" @click="clickLogin"
            >登录</a
          >
        </span>
        <span class="mod-top-user" v-if="logged">
          <img class="top-user-pic" :src="userImg" :alt="userName" />
          <span class="mod-top-user-name">{{ userName }}</span>
        </span>
        <div class="mod-top-user-operate" v-if="logged">
          <ul class="clearfix">
            <li class="user-opt-item" @click="clickProfile">
              <span class="item-icon">
                <i class="iconfont">&#xe8cf;</i>
              </span>
              <span class="item-content">我的主页</span>
            </li>
            <li class="user-opt-item" @click="clickEvent">
              <span class="item-icon">
                <i class="iconfont">&#xe64f;</i>
              </span>
              <span class="item-content">我的动态</span>
            </li>
            <!-- <li class="user-opt-item">
              <span class="item-icon">
                <i class="iconfont">&#xe8cf;</i>
              </span>
              <span class="item-content">我的主页</span>
            </li> -->
            <li class="user-opt-item" @click="logout">
              <span class="item-icon">
                <i class="iconfont">&#xec49;</i>
              </span>
              <span class="item-content">退出</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import user from "assets/images/user.png";
export default {
  data() {
    return {
      input: this.$store.state.input,
      type: 1,
      // 去除前面空格的输入内容
      trimInput: "",
      currentIndex: 0,
      paths: [
        "/home",
        "/toplists",
        "/playlists",
        "/artists",
        "/mvs",
        "/albums",
      ],
      titles: ["推荐", "排行榜", "歌单", "歌手", "MV", "新碟上架"],
      showSubNav: true,
      // 发现音乐、我的音乐、关注
      headCurrent: 0,
      // 防抖计时器
      timeout: null,
      // 搜索建议数据
      suggests: {},
      // 控制搜索建议显示隐藏
      showResult: false,
      logged: this.$store.state.isLogin,
      status: {},
      userImg: this.$store.state.profile.avatarUrl,
      userName: "",
      userId: "",
      // input2: "",
    };
  },
  watch: {
    "$store.state.isLogin": function () {
      // console.log(this.$store.state.isLogin);
      if (this.$store.state.isLogin) {
        this.logged = true;
        this.getLoginStatus();
      }
    },
  },
  mounted() {
    // console.log(this.logged);
    if (this.$route.path.slice(0, 3) == "/my") {
      this.headCurrent = 1;
    } else if (this.$route.path == "/friend") {
      this.headCurrent = 2;
    } else {
      this.headCurrent = 0;
    }
    this.currentIndex = this.paths.indexOf(this.$route.path);
    this.hideSubNav();
    // 点击外部时隐藏搜索建议
    document.addEventListener("click", (e) => {
      if (e.target.className !== "mod-top-search") {
        this.showResult = false;
      }
    });
    this.getLoginStatus();
  },

  methods: {
    // Input2() {
    //   console.log(this.input2);
    // },
    clickFriend() {
      this.playFriend();
    },
    clickMy() {
      this.playMy();
    },
    clickProfile() {
      this.playUserDetail(this.userId);
    },
    clickEvent() {
      this.playUserEvent(this.userId);
    },
    getCookie(name) {
      var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
      else return null;
    },
    logout() {
      this.axios({
        url: "/logout",
      })
        .then((res) => {
          console.log(res.data);
          this.getLoginStatus();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getLoginStatus() {
      // 获取登录状态
      this.axios({
        url: "/login/status?timerstamp=" + Date.now(),
      })
        .then((res) => {
          this.status = res.data;
          // console.log(this.status);
          if (this.status.data.profile) {
            // this.$store.state.profile = this.status.data.profile;
            this.$store.commit("changeProfile", this.status.data.profile);
            // 已登录
            // console.log("已登录");
            this.userImg = this.status.data.profile.avatarUrl;
            this.userName = this.status.data.profile.nickname;
            this.userId = this.status.data.profile.userId;
            this.logged = true;
            // this.$store.state.isLogin = true;
            this.$store.commit("changeIsLogin", true);
          } else {
            // 未登录
            // console.log("未登录");
            // this.$store.state.profile = {};
            this.$store.commit("changeProfile", {});
            // this.$store.state.isLogin = false;
            this.$store.commit("changeIsLogin", false);
            this.logged = false;
          }
          console.log(this.$store.state.profile);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickLogin() {
      this.$emit("clickLogin", true);
    },
    // 详细搜索
    search() {
      // this.$store.state.input = this.input;
      this.$store.commit("changeInput", this.input);
      // this.$store.state.MInput = this.input;
      this.$store.commit("changeMInput", this.input);
      this.input = this.$store.state.input;
      // 去掉空格
      this.trimInput = this.$store.state.input.trimLeft();
      if (this.trimInput != "") {
        this.playSearch(this.trimInput, this.type);
      }
    },
    searchInput() {
      // 防抖
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // console.log(this.input);
        // this.$store.state.input = this.input;
        this.$store.commit("changeInput", this.input);
        // console.log(this.$store.state.input);
        // this.$store.commit("changeInput", this.input);
        // this.input = this.$store.state.input;
        // console.log(this.input);
        // console.log(this.$store.state.input);
        this.trimInput = this.input.trimLeft();
        // console.log(this.trimInput);
        // this.suggests = {};
        // this.showResult = false;
        this.getSearchSuggest();
      }, 500);
    },
    getSearchSuggest() {
      // 搜索建议接口
      this.axios({
        url: "/search/suggest?keywords=" + this.trimInput,
      })
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 200) {
            if (res.data.result.order) {
              this.showResult = true;
              this.suggests = res.data.result;
              console.log(this.suggests);
            }
          } else {
            this.showResult = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 隐藏导航栏
    hideSubNav() {
      if (
        this.$route.path == "/user" ||
        this.$route.path == "/search" ||
        this.$route.path.slice(0, 3) == "/my" ||
        this.$route.path == "/friend"
      ) {
        this.showSubNav = false;
      } else {
        this.showSubNav = true;
      }
    },
    // 点击导航
    itemClick(index) {
      console.log(this.paths[index]);
      // console.log(this.currentIndex);
      this.currentIndex = index;
      this.$router.push(this.paths[index]);
      // this.$store.state.isLogin = !this.$store.state.isLogin;
    },
    clickHome() {
      this.$router.push("/home");
    },
    clickSongs(id) {
      this.playSong(id);
      // this.$router.push({ path: "/song", query: { id: id } });
    },
    mvClick(id) {
      this.playMv(id);
      // this.$router.push({ path: "/mv", query: { id: id } });
    },
    videoClick(id) {
      this.playVideo(id);
      // this.$router.push({ path: "/video", query: { id: id } });
    },
    clickArtistDetail(id) {
      this.playArtistDetail(id);
    },
    clickUserDetail(id) {
      this.playUserDetail(id);
    },
    clickAlbumDetail(id) {
      this.playAlbumDetail(id);
    },
  },
};
</script>

<style>
.mod-header {
  background-color: var(--color-background);
  position: relative;
  z-index: 4;
}
.mod-header .section-inner {
  padding-top: 90px;
}
.section-inner {
  position: relative;
  margin: 0 auto;
  max-width: 1200px;
}

/* logo */
.qmusic-title {
  position: absolute;
  left: 0;
  top: 13px;
  font-size: 0;
}
.qmusic-logo {
  width: 170px;
}

/* mod-top-nav */
.mod-top-nav {
  position: absolute;
  left: 198px;
  top: 0;
}
.top-nav-item {
  position: relative;
  float: left;
  margin-right: -5px;
}
.top-nav-link:hover {
  color: var(--color-theme);
}
.top-nav-link-current,
.top-nav-link-current:hover {
  background-color: var(--color-theme);
  color: var(--color-theme-text);
}
.top-nav-link {
  display: block;
  padding: 0 20px;
  line-height: 90px;
  height: 90px;
  text-align: center;
  font-size: 18px;
}

/* mod-top-subnav */
.mod-top-subnav {
  height: 51px;
  line-height: 51px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  padding-left: 230px;
}

.top-subnav-item {
  float: left;
  margin-right: 47px;
  font-size: 15px;
}
.top-subnav-item-current a {
  color: var(--color-theme) !important;
}
.top-subnav-link {
  display: block;
}
.top-subnav-link:hover {
  color: var(--color-theme);
}

/* mod-top-search*/
.mod-top-search {
  position: absolute;
  top: 0;
  padding-bottom: 2px;
  right: 150px;
  width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 20;
}
.mod-search-input {
  border: 1px solid #c9c9c9;
  padding: 0 33px 0 11px;
  line-height: 36px;
  height: 36px;
  margin-top: 26px;
  position: relative;
  border-radius: 3px;
  background-color: #fff;
}
.search-input-input {
  width: 174px;
  height: 30px;
  border: 0;
  font-size: 14px;
  outline-style: none;
}
.search-input-btn {
  position: absolute;
  top: 0;
  right: 0;
  border: 0;
  width: 38px;
  height: 35px;
  overflow: visible;
  background: transparent;
  cursor: pointer;
}
.search-input-btn .el-icon-search {
  font-size: 20px;
}
.search-input-btn .el-icon-search:hover {
  color: var(--color-theme);
}
.icon-txt {
  font: 0/0 a;
}
/* mod-search-result */
.mod-search-result {
  position: relative;
  top: 2px;
  width: 220px;
  line-height: 36px;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 3px;
  z-index: 20;
}
.search-result-box {
  position: relative;
}
.search-result-title {
  padding-left: 36px;
  font-weight: 400;
  color: #999;
}
.search-result-title .iconfont {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
}
.search-result-ul {
  border-bottom: 1px solid #f2f2f2;
}
.search-result-item {
  padding-left: 36px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.search-result-item:hover {
  background-color: var(--color-theme);
}
.search-result-item a {
  color: #999;
}
.search-result-item:hover a {
  color: #fff;
}
.search-result-item-name {
  color: var(--color-theme);
}
.search-result-item:hover .search-result-item-name {
  color: #fff;
}
/* header-opt */
.header-opt {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  line-height: 90px;
}
.mod-top-login,
.mod-top-user {
  position: relative;
  display: block;
  margin-top: 15px;
  margin-left: 15px;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
}
.mod-top-login .top-login-link {
  display: block;
  width: 60px;
  height: 60px;
  font-size: 16px;
  text-align: center;
}
.mod-top-login .top-login-link:hover {
  color: var(--color-theme);
}
.mod-top-user .top-user-pic {
  width: 100%;
  height: 100%;
}
.mod-top-user-name {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0;
}
/* mod-top-user-operate */
.mod-top-user-operate {
  display: none;
  position: absolute;
  top: 90px;
  left: -30px;
  width: 150px;
  line-height: 28px;
  border-radius: 10px;
  background-color: var(--color-theme-light-4);
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
}
.mod-top-user-operate ul {
  border-radius: 10px;
  overflow: hidden;
}
.header-opt:hover .mod-top-user-operate {
  display: block;
}
.mod-top-user-operate:hover {
  display: block;
}
.mod-top-user-operate::before {
  position: absolute;
  top: -20px;
  left: 65px;
  content: "";
  border: 10px solid transparent;
  border-bottom: 10px solid var(--color-theme-light-4);
}
.mod-top-user-operate .user-opt-item {
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.mod-top-user-operate .user-opt-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.mod-top-user-operate .user-opt-item .item-icon {
  margin-left: 25px;
}
.mod-top-user-operate .user-opt-item .item-content {
  margin-left: 10px;
}
</style>